<template>
	
	<view class="home-container">
		<!-- 搜索栏 -->
		<view class="search-bar">
			<view class="search-input">
				<text class="search-icon">🔍</text>
				<input type="text" placeholder="搜索商品" placeholder-class="placeholder-text" />
			</view>
			<view class="scan-btn">
				<text>📷</text>
			</view>
		</view>

		<!-- Banner轮播图 -->
		<swiper class="banner-swiper" autoplay indicator-dots circular>
			<swiper-item>
				<image src="https://picsum.photos/800/300?random=1" class="banner-image"></image>
			</swiper-item>
			<swiper-item>
				<image src="https://picsum.photos/800/300?random=2" class="banner-image"></image>
			</swiper-item>
			<swiper-item>
				<image src="https://picsum.photos/800/300?random=3" class="banner-image"></image>
			</swiper-item>
		</swiper>

		<!-- 分类导航 -->
		<view class="category-nav">
			<view class="nav-item" v-for="(item, index) in categories" :key="index">
				<view class="nav-icon">{{item.icon}}</view>
				<text class="nav-text">{{item.name}}</text>
			</view>
		</view>

		<!-- 限时特惠 -->
		<view class="flash-sale">
			<view class="section-header">
				<view class="title-container">
					<text class="section-title flash-title">限时特惠</text>
					<view class="discount-badge">限时5折</view>
				</view>
				<view class="countdown">
					<text class="countdown-text">距结束</text>
					<view class="time-box">12</view>
					<text class="time-separator">:</text>
					<view class="time-box">34</view>
					<text class="time-separator">:</text>
					<view class="time-box">56</view>
				</view>
				<text class="more">查看更多</text>
			</view>
			<scroll-view class="flash-sale-scroll" scroll-x="true" show-scrollbar="false">
				<view class="flash-scroll-wrapper">
					<view class="flash-item" v-for="(item, index) in flashProducts" :key="index">
						<view class="discount-tag">{{ Math.round((1 - item.price / item.originalPrice) * 100) }}%OFF</view>
						<image :src="item.image" class="flash-product-image"></image>
						<text class="flash-product-title">{{item.title || '限时特惠商品'}}</text>
						<view class="price-container">
							<text class="flash-product-price">¥{{item.price}}</text>
							<text class="flash-original-price">¥{{item.originalPrice}}</text>
						</view>
						<view class="buy-now">立即购买</view>
					</view>
				</view>
			</scroll-view>
		</view>

		<!-- 推荐商品 -->
		<view class="recommend">
			<view class="section-header">
				<text class="section-title">为您推荐</text>
				<text class="more">查看更多</text>
			</view>
			<view class="product-grid">
				<view class="product-item" v-for="(item, index) in recommendProducts" :key="index">
					<image :src="item.image" class="product-image"></image>
					<text class="product-title">{{item.title}}</text>
					<text class="product-price">¥{{item.price}}</text>
					<view class="add-cart">+</view>
				</view>
			</view>
		</view>

		<!-- 热门品牌 -->
		<view class="brands">
			<view class="section-header">
				<text class="section-title">热门品牌</text>
			</view>
			<view class="brand-list">
				<view class="brand-item" v-for="(item, index) in brands" :key="index">
					<image :src="item.image" class="brand-image"></image>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
import { ref, onMounted } from 'vue';

// 分类数据
const categories = ref([
	{ icon: '👔', name: '服饰' },
	{ icon: '📱', name: '数码' },
	{ icon: '🏠', name: '家居' },
	{ icon: '🍎', name: '生鲜' },
	{ icon: '🚗', name: '汽车' },
	{ icon: '💄', name: '美妆' },
	{ icon: '📚', name: '图书' },
	{ icon: '🎮', name: '游戏' }
]);

// 限时特惠商品
const flashProducts = ref([
	{ image: 'https://picsum.photos/200/200?random=10', price: 99, originalPrice: 199, title: '时尚休闲运动鞋' },
	{ image: 'https://picsum.photos/200/200?random=11', price: 199, originalPrice: 299, title: '智能手环 健康监测' },
	{ image: 'https://picsum.photos/200/200?random=12', price: 299, originalPrice: 399, title: '轻薄便携笔记本电脑包' },
	{ image: 'https://picsum.photos/200/200?random=13', price: 399, originalPrice: 499, title: '专业摄影三脚架' },
	{ image: 'https://picsum.photos/200/200?random=14', price: 499, originalPrice: 599, title: '无线蓝牙耳机 主动降噪' }
]);

// 推荐商品
const recommendProducts = ref([
	{ image: 'https://picsum.photos/300/300?random=20', title: '高品质纯棉T恤', price: 129 },
	{ image: 'https://picsum.photos/300/300?random=21', title: '智能手环', price: 199 },
	{ image: 'https://picsum.photos/300/300?random=22', title: '舒适沙发垫', price: 299 },
	{ image: 'https://picsum.photos/300/300?random=23', title: '新鲜水果礼盒', price: 159 },
	{ image: 'https://picsum.photos/300/300?random=24', title: '汽车香薰', price: 59 },
	{ image: 'https://picsum.photos/300/300?random=25', title: '口红套装', price: 299 },
	{ image: 'https://picsum.photos/300/300?random=26', title: '畅销小说', price: 49 },
	{ image: 'https://picsum.photos/300/300?random=27', title: '游戏手柄', price: 399 }
]);

// 热门品牌
const brands = ref([
	{ image: 'https://picsum.photos/150/80?random=30' },
	{ image: 'https://picsum.photos/150/80?random=31' },
	{ image: 'https://picsum.photos/150/80?random=32' },
	{ image: 'https://picsum.photos/150/80?random=33' }
]);

// 页面加载时的逻辑
onMounted(() => {
	// 页面加载时的逻辑
});

// 搜索功能
const search = () => {
	// 搜索逻辑
};

// 添加购物车
const addToCart = (product) => {
	// 添加购物车逻辑
};
</script>

<style>
.home-container {
	background-color: #f5f5f5;
	min-height: 100vh;
}

/* 搜索栏 */
.search-bar {
	display: flex;
	padding: 20rpx;
	background-color: #FF6B6B;
	align-items: center;
}
.search-input {
	flex: 1;
	display: flex;
	align-items: center;
	background-color: white;
	border-radius: 30rpx;
	padding: 0 20rpx;
	height: 70rpx;
}
.search-icon {
	margin-right: 10rpx;
	font-size: 28rpx;
}
input {
	flex: 1;
	font-size: 28rpx;
}
.placeholder-text {
	color: #999;
}
.scan-btn {
	margin-left: 20rpx;
	font-size: 36rpx;
	color: white;
}

/* Banner轮播图 */
.banner-swiper {
	height: 300rpx;
	width: 100%;
}
.banner-image {
	height: 100%;
	width: 100%;
}

/* 分类导航 */
.category-nav {
	display: flex;
	flex-wrap: wrap;
	background-color: white;
	padding: 20rpx 0;
}
.nav-item {
	width: 25%;
	display: flex;
	flex-direction: column;
	align-items: center;
	padding: 20rpx 0;
}
.nav-icon {
	width: 80rpx;
	height: 80rpx;
	background-color: #f0f0f0;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 40rpx;
	margin-bottom: 10rpx;
}
.nav-text {
	font-size: 24rpx;
}

/* 通用section样式 */
.section-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 20rpx;
	background-color: white;
}
.section-title {
	font-size: 32rpx;
	font-weight: bold;
}
.more {
	font-size: 24rpx;
	color: #999;
}

/* 限时特惠 */
.flash-sale {
	margin-top: 20rpx;
	background-color: white;
	border-radius: 15rpx;
	overflow: hidden;
}
.section-header {
	padding: 20rpx 30rpx;
}
.title-container {
	display: flex;
	align-items: center;
}
.flash-title {
	color: #FF4757;
	font-size: 36rpx;
	margin-right: 15rpx;
}
.discount-badge {
	background-color: #FF4757;
	color: white;
	font-size: 20rpx;
	padding: 5rpx 10rpx;
	border-radius: 15rpx;
}
.countdown {
	display: flex;
	align-items: center;
	font-size: 24rpx;
}
.countdown-text {
	color: #FF4757;
	font-weight: bold;
}
.time-box {
	background-color: #FF4757;
	color: white;
	padding: 5rpx 15rpx;
	border-radius: 10rpx;
	margin: 0 5rpx;
	font-weight: bold;
	min-width: 50rpx;
	text-align: center;
}
.time-separator {
	color: #FF4757;
	font-weight: bold;
	font-size: 28rpx;
	margin: 0 2rpx;
}
.flash-sale-scroll {
	width: 100%;
	white-space: nowrap;
	padding-bottom: 20rpx;
}
.flash-scroll-wrapper {
	display: inline-flex;
	padding-left: 30rpx;
	padding-right: 10rpx;
}
.flash-item {
	display: flex;
	flex-direction: column;
	background-color: #FFF5F5;
	border-radius: 15rpx;
	padding: 20rpx;
	margin-right: 20rpx;
	width: 280rpx;
	position: relative;
	box-shadow: 0 4rpx 15rpx rgba(255, 71, 87, 0.1);
	transition: transform 0.3s ease;
}
.flash-item:active {
	transform: scale(0.98);
}
.discount-tag {
	position: absolute;
	top: 0;
	left: 0;
	background-color: #FF4757;
	color: white;
	font-size: 20rpx;
	font-weight: bold;
	padding: 5rpx 15rpx;
	border-radius: 15rpx 0 15rpx 0;
	z-index: 1;
}
.flash-product-image {
	width: 100%;
	height: 240rpx;
	border-radius: 10rpx;
	margin-bottom: 15rpx;
	object-fit: cover;
}
.flash-product-title {
	font-size: 26rpx;
	color: #333;
	margin-bottom: 15rpx;
	overflow: hidden;
	text-overflow: ellipsis;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	line-height: 1.4;
	flex: 1;
}
.price-container {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 15rpx;
}
.flash-product-price {
	font-size: 38rpx;
	color: #FF4757;
	font-weight: bold;
}
.flash-original-price {
	font-size: 24rpx;
	color: #999;
	text-decoration: line-through;
}
.buy-now {
	background-color: #FF4757;
	color: white;
	text-align: center;
	padding: 12rpx;
	border-radius: 25rpx;
	font-size: 28rpx;
	font-weight: bold;
	letter-spacing: 1rpx;
}

/* 推荐商品 */
.recommend {
	margin-top: 20rpx;
	background-color: white;
}
.product-grid {
	display: flex;
	flex-wrap: wrap;
	padding: 0 20rpx 20rpx;
}
.product-item {
	width: 48%;
	margin-bottom: 20rpx;
	position: relative;
}
.product-item:nth-child(odd) {
	margin-right: 4%;
}
.product-image {
	width: 100%;
	height: 300rpx;
	border-radius: 10rpx;
}
.product-title {
	font-size: 28rpx;
	margin-top: 10rpx;
	overflow: hidden;
	text-overflow: ellipsis;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	height: 72rpx;
}
.product-price {
	font-size: 32rpx;
	color: #FF6B6B;
	font-weight: bold;
	margin-top: 10rpx;
}
.original-price {
	font-size: 24rpx;
	color: #999;
	text-decoration: line-through;
	margin-top: 5rpx;
}
.add-cart {
	position: absolute;
	bottom: 60rpx;
	right: 20rpx;
	width: 60rpx;
	height: 60rpx;
	background-color: #FF6B6B;
	color: white;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 40rpx;
	font-weight: bold;
}

/* 热门品牌 */
.brands {
	margin-top: 20rpx;
	background-color: white;
}
.brand-list {
	display: flex;
	flex-wrap: wrap;
	padding: 0 20rpx 20rpx;
}
.brand-item {
	width: 48%;
	margin-bottom: 20rpx;
}
.brand-item:nth-child(odd) {
	margin-right: 4%;
}
.brand-image {
	width: 100%;
	height: 160rpx;
	border-radius: 10rpx;
}
</style>
